<template>
  <div class="zzui-broadcast-window clear" ref="marquee" :style="{width: `${width}`}">
    <div
      class="zzui-broadcast-container"
      :style="{fontSize: fontSize, color:color}">
      <p
        v-for="item in contentMarquee"
        ref="contentMarquee"
        :style="{
          transform: `translateX(${item.translateX}px)`,
          msTransform: `translateX(${item.translateX}px)`,
          }">{{item.name}}</p>
    </div>
  </div>

</template>
<script>
  export default{
    name: 'zz-marquee',
    data () {
      return {
        marqueeInterval: null,
        contentMarquee: [],
        contentListCopy: []
      }
    },
    props: {
      contentList: {
        type: Array,
        default: function () {
          return []
        }
      },
      width: {
        type: String,
        default: '100%'
      },
      fontSize: {
        type: String,
        default: '28px'
      },
      marginRight: {
        type: Number,
        default: 800
      },
      color: {
        type: String,
        default: 'red'
      },
      isStack: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      contentList () {
        this.start()
      }
    },
    mounted () {
      this.start()
    },
    methods: {
      start () {
        let index = 0
        let rectMarquee = this.$refs.marquee.getBoundingClientRect()
        this.contentListCopy = this.contentList.map((item) => {
          return {
            name: item,
            show: true,
            translateX: rectMarquee.width
          }
        })
        this.contentMarquee = [this.contentListCopy[index]]
        if (this.marqueeInterval) {
          window.clearInterval(this.marqueeInterval)
          this.marqueeInterval = null
        }
        this.marqueeInterval = setInterval(() => {
          this.contentMarquee.forEach((item, i) => {
            let contentMarqueeLength = this.contentMarquee.length
            let length = this.contentListCopy.length
            if (!item.textWidth && this.$refs.contentMarquee[i]) {
              item.textWidth = this.$refs.contentMarquee[i].getBoundingClientRect().width
            }
            item.translateX--
            let lastWidth = Number.parseInt(rectMarquee.width - item.translateX - item.textWidth)
            if (contentMarqueeLength < 2 && item.textWidth && lastWidth === this.marginRight) {
              if (index === length - 1) {
                index = -1
              }
              index++
              let second = this.contentListCopy[index]
              // 是否需要减去上一条的数据
              if (this.isStack) {
                second.translateX -= item.textWidth
              }
              this.contentMarquee.push(this.contentListCopy[index])
            }
            if (item.textWidth && -Number.parseInt(item.translateX) === Number.parseInt(item.textWidth)) {
              item.translateX = rectMarquee.width
              if (this.isStack) {
                this.contentMarquee[i + 1].translateX += item.textWidth
              }
              this.contentMarquee.splice(i, 1)
            }
          })
        }, 20)
      }
    }
  }
</script>
<style lang="scss">
  .zzui-broadcast-window{
    margin: 0 auto;
    overflow: hidden;
    height: 100%;
    text-align: right;
    .zzui-broadcast-container{
      font-weight: bold;
      white-space: nowrap;
      position: relative;
      > p{
        float: left;
        position: absolute;
      }
    }
  }
</style>
